import { View, Text, StyleSheet, TouchableOpacity } from "react-native"
import { Check } from "lucide-react-native"
import { theme } from "../../constants/theme"

export interface Step {
    id: string
    label: string
}

interface StepsIndicatorProps {
    steps: Step[]
    currentStep: number
    onStepChange?: (index: number) => void
    containerStyle?: object
}

export const StepsIndicator = ({ steps, currentStep, onStepChange, containerStyle }: StepsIndicatorProps) => {
    return (
        <View style={[styles.stepsContainer, containerStyle]}>
            {steps.map((step, index) => (
                <TouchableOpacity
                    key={step.id}
                    style={styles.stepItem}
                    onPress={() => onStepChange && onStepChange(index)}
                    activeOpacity={0.7}
                >
                    <View style={styles.stepTouchable}>
                        {index < currentStep ? (
                            <View style={styles.stepIconCompleted}>
                                <Check size={12} color="#fff" />
                            </View>
                        ) : index === currentStep ? (
                            <View style={styles.stepIconCurrent}>
                                <Text style={styles.stepNumberText}>{index + 1}</Text>
                            </View>
                        ) : (
                            <View style={styles.stepIconUpcoming}>
                                <Text style={styles.stepNumberTextUpcoming}>{index + 1}</Text>
                            </View>
                        )}
                        <Text style={[styles.stepLabel, index === currentStep && styles.stepLabelActive]}>{step.label}</Text>
                    </View>
                    {index < steps.length - 1 && <View style={styles.stepConnector} />}
                </TouchableOpacity>
            ))}
        </View>
    )
}

const styles = StyleSheet.create({
    stepsContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.sm,
        position: "relative",
        marginBottom: theme.spacing.sm,
    },
    stepItem: {
        position: "relative",
        alignItems: "center",
        flex: 1,
    },
    stepTouchable: {
        alignItems: "center",
        justifyContent: "center",
    },
    stepIconCompleted: {
        width: 22,
        height: 22,
        borderRadius: 11,
        backgroundColor: theme.colors.secondary.green.default,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 2,
    },
    stepIconCurrent: {
        width: 22,
        height: 22,
        borderRadius: 11,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 2,
    },
    stepIconUpcoming: {
        width: 22,
        height: 22,
        borderRadius: 11,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 2,
    },
    stepNumberText: {
        fontSize: 10,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    stepNumberTextUpcoming: {
        fontSize: 10,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    stepConnector: {
        position: "absolute",
        top: 11,
        right: -50 + "%",
        width: "100%",
        height: 1,
        backgroundColor: theme.colors.neutral.lightGray,
        zIndex: -1,
    },
    stepLabel: {
        fontSize: 10,
        color: theme.colors.neutral.gray,
    },
    stepLabelActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
})

